<template>
  <div class="feishu-filter-panel">
    <!-- 筛选器头部 -->
    <div class="filter-header">
      <h3>筛选条件</h3>
      <el-button type="primary" link @click="addCondition">
        <el-icon><Plus /></el-icon>
        添加条件
      </el-button>
    </div>

    <!-- 筛选条件列表 -->
    <div class="conditions-list">
      <div
        v-for="(condition, index) in conditions"
        :key="condition.id"
        class="condition-item"
      >
        <!-- 字段选择 -->
        <el-select
          v-model="condition.field"
          placeholder="选择字段"
          @change="onFieldChange(index)"
          style="width: 160px; margin-right: 8px;"
        >
          <el-option
            v-for="field in availableFields"
            :key="field.value"
            :label="field.label"
            :value="field.value"
          />
        </el-select>

        <!-- 操作符选择 -->
        <el-select
          v-model="condition.operator"
          placeholder="选择条件"
          style="width: 140px; margin-right: 8px;"
        >
          <el-option
            v-for="op in getOperators(condition.fieldType)"
            :key="op.value"
            :label="op.label"
            :value="op.value"
          />
        </el-select>

        <!-- 值输入 - 根据字段类型动态显示 -->
        <div class="value-input">
          <!-- 文本输入 -->
          <el-input
            v-if="condition.fieldType === 'text'"
            v-model="condition.value"
            placeholder="输入值"
            style="width: 180px;"
          />

          <!-- 数字输入 -->
          <el-input-number
            v-else-if="condition.fieldType === 'number'"
            v-model="condition.value"
            controls-position="right"
            style="width: 180px;"
          />

          <!-- 日期选择 -->
          <el-date-picker
            v-else-if="condition.fieldType === 'date'"
            v-model="condition.value"
            type="date"
            placeholder="选择日期"
            style="width: 180px;"
          />

          <!-- 日期范围 -->
          <el-date-picker
            v-else-if="condition.fieldType === 'daterange'"
            v-model="condition.value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 240px;"
          />

          <!-- 选择器 -->
          <el-select
            v-else-if="condition.fieldType === 'select'"
            v-model="condition.value"
            placeholder="选择选项"
            style="width: 180px;"
          >
            <el-option
              v-for="option in getFieldOptions(condition.field)"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <!-- 多选 -->
          <el-select
            v-else-if="condition.fieldType === 'multiple'"
            v-model="condition.value"
            multiple
            placeholder="选择多个选项"
            style="width: 180px;"
          >
            <el-option
              v-for="option in getFieldOptions(condition.field)"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>

        <!-- 删除按钮 -->
        <el-button
          type="danger"
          link
          @click="removeCondition(index)"
          style="margin-left: 8px;"
        >
          <el-icon><Delete /></el-icon>
        </el-button>
      </div>
    </div>

    <!-- 操作按钮 -->
    <div class="filter-actions">
      <el-button type="primary" @click="applyFilters">
        <el-icon><Search /></el-icon>
        应用筛选
      </el-button>
      <el-button @click="resetFilters">
        <el-icon><Refresh /></el-icon>
        重置
      </el-button>
      <el-button type="info" link @click="clearAll">
        清空所有条件
      </el-button>
    </div>

    <!-- 筛选结果统计 -->
    <div v-if="filterResult" class="filter-result">
      <el-text type="info">
        找到 {{ filterResult.count }} 条记录
        <el-button type="primary" link @click="showFilterResult = !showFilterResult">
          {{ showFilterResult ? '隐藏' : '显示' }}详情
        </el-button>
      </el-text>

      <div v-if="showFilterResult && filterResult.items.length" class="result-details">
        <el-table :data="filterResult.items" border style="width: 100%; margin-top: 12px;">
          <el-table-column
            v-for="field in availableFields"
            :key="field.value"
            :prop="field.value"
            :label="field.label"
          />
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Delete, Search, Refresh } from '@element-plus/icons-vue'

// 可用字段定义
const availableFields = ref([
  { label: '任务名称', value: 'name', type: 'text' },
  { label: '负责人', value: 'assignee', type: 'select', options: [
    { label: '张三', value: 'zhangsan' },
    { label: '李四', value: 'lisi' },
    { label: '王五', value: 'wangwu' }
  ]},
  { label: '状态', value: 'status', type: 'multiple', options: [
    { label: '未开始', value: 'pending' },
    { label: '进行中', value: 'progress' },
    { label: '已完成', value: 'completed' }
  ]},
  { label: '优先级', value: 'priority', type: 'select', options: [
    { label: '高', value: 'high' },
    { label: '中', value: 'medium' },
    { label: '低', value: 'low' }
  ]},
  { label: '创建时间', value: 'createTime', type: 'date' },
  { label: '截止日期', value: 'dueDate', type: 'daterange' },
  { label: '进度', value: 'progress', type: 'number' },
  { label: '工作量', value: 'workload', type: 'number' }
])

// 操作符配置
const operators = {
  text: [
    { label: '包含', value: 'contains' },
    { label: '等于', value: 'equals' },
    { label: '开头是', value: 'startsWith' },
    { label: '结尾是', value: 'endsWith' }
  ],
  number: [
    { label: '等于', value: 'equals' },
    { label: '大于', value: 'greater' },
    { label: '小于', value: 'less' },
    { label: '大于等于', value: 'greaterEqual' },
    { label: '小于等于', value: 'lessEqual' },
    { label: '介于', value: 'between' }
  ],
  date: [
    { label: '等于', value: 'equals' },
    { label: '之后', value: 'after' },
    { label: '之前', value: 'before' },
    { label: '介于', value: 'between' }
  ],
  daterange: [
    { label: '介于', value: 'between' }
  ],
  select: [
    { label: '等于', value: 'equals' },
    { label: '不等于', value: 'notEquals' }
  ],
  multiple: [
    { label: '包含', value: 'contains' },
    { label: '不包含', value: 'notContains' },
    { label: '等于', value: 'equals' }
  ]
}

// 筛选条件
const conditions = ref([])
const filterResult = ref(null)
const showFilterResult = ref(false)

// 获取操作符列表
const getOperators = (fieldType) => {
  return operators[fieldType] || operators.text
}

// 获取字段选项
const getFieldOptions = (fieldValue) => {
  const field = availableFields.value.find(f => f.value === fieldValue)
  return field?.options || []
}

// 添加条件
const addCondition = () => {
  conditions.value.push({
    id: Date.now(),
    field: '',
    fieldType: 'text',
    operator: '',
    value: ''
  })
}

// 删除条件
const removeCondition = (index) => {
  conditions.value.splice(index, 1)
}

// 字段变化时更新字段类型
const onFieldChange = (index) => {
  const condition = conditions.value[index]
  const field = availableFields.value.find(f => f.value === condition.field)
  if (field) {
    condition.fieldType = field.type
    condition.operator = '' // 重置操作符
    condition.value = '' // 重置值
  }
}

// 应用筛选
const applyFilters = () => {
  const activeConditions = conditions.value.filter(cond =>
    cond.field && cond.operator && cond.value !== ''
  )

  if (activeConditions.length === 0) {
    ElMessage.warning('请至少设置一个筛选条件')
    return
  }

  // 模拟筛选结果
  filterResult.value = {
    count: Math.floor(Math.random() * 100) + 1,
    items: Array.from({ length: 5 }, (_, i) => ({
      name: `任务 ${i + 1}`,
      assignee: '张三',
      status: '进行中',
      priority: '中',
      createTime: '2024-01-15',
      dueDate: '2024-01-30',
      progress: 50,
      workload: 8
    }))
  }

  ElMessage.success(`找到 ${filterResult.value.count} 条记录`)
}

// 重置筛选
const resetFilters = () => {
  conditions.value.forEach(condition => {
    condition.value = ''
  })
  filterResult.value = null
  ElMessage.info('筛选条件已重置')
}

// 清空所有条件
const clearAll = () => {
  conditions.value = []
  filterResult.value = null
  ElMessage.info('所有条件已清空')
}

// 初始化时添加一个空条件
onMounted(() => {
  addCondition()
})
</script>

<style scoped>
.feishu-filter-panel {
  background: #fff;
  border: 1px solid #e5e6eb;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1f2329;
}

.conditions-list {
  margin-bottom: 16px;
}

.condition-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding: 12px;
  background: #fafafa;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.condition-item:hover {
  background: #f5f5f5;
}

.value-input {
  display: flex;
  align-items: center;
}

.filter-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.filter-result {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f0f0;
}

.result-details {
  margin-top: 12px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .condition-item {
    flex-direction: column;
    align-items: stretch;
  }

  .condition-item > * {
    margin-bottom: 8px;
    margin-right: 0 !important;
  }

  .value-input {
    width: 100%;
  }

  .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
</style>
